<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      append-to-body
      title="添加审批人"
  >
    <el-form  :label-position="labelPosition"  label-width="120px" ref="form" :v-model="form"  v-loading="loading">
      <el-form-item prop="useDir" label="包含/排除">
        <el-switch
            v-model="form.useDir"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="包含"
            inactive-text="排除"
            active-value="INCLUDE"
            inactive-value="EXCLUDE">
        </el-switch>
      </el-form-item>
      <el-form-item prop="userType" label="用户类型">
        <el-select v-model="form.userType" placeholder="请选择" @change="userTypeChange">
          <el-option
              v-for="item in userTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="taskNode" label="审批节点"  v-if="form.userType === 'NODE_APPROVE'">
        <el-select v-model="form.taskNode" placeholder="请选择">
          <el-option
              v-for="item in allTaskNodes"
              :key="item.nodeId"
              :label="item.nodeName"
              :value="item.nodeId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="account" label="选择用户" v-if="form.userType === 'ACCOUNT'">
        <el-select v-model="form.account"
                   filterable
                   remote
                   reserve-keyword
                   :remote-method="queryAccounts"
                   placeholder="请输入"
                   size= "small"
                   :loading="approvalAccount.loading">
          <el-option
              v-for="item in approvalAccount.options"
              :key="item.userAccount"
              :label="item.username"
              :value="item.userAccount">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="variableAccount" label="变量用户" v-if="form.userType === 'VARIABLE'">
        <el-input size= "small" type="textarea" style="width: 90%" rows="4"  v-model="form.variableAccount"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-group" style="margin-top: 70px;">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>

  </el-dialog>

</template>
<script>

import {queryUserList} from "@/api/user";
import {getAllTaskNodes} from '@/api/workflowProcess'
import { utils } from '../../utils/common.js'
export default {
  data(){
    return {
      labelPosition:'left',
      dialogVisible: false,
      loading: false,
      allTaskNodes:[],
      userTypes:[
          {
            value: 'START',
            label: '流程发起人'
          },
          {
            value: 'VARIABLE',
            label: '变量用户'
          },
          {
            value: 'ACCOUNT',
            label: '账号'
          },
          {
            value: 'NODE_APPROVE',
            label: '某个节点审批人'
          },
          {
            value: 'ALL_APPROVE',
            label: '所有流程审批人'
          }
      ],
      form: {
        cid:'',
        configId:"",
        useDir:"INCLUDE",
        // TRUE  FALSE  NO
        conditionRes:"",
        //START|VARIABLE|ACCOUNT
        userType:"",
        approveUser:"",

        taskNode:"",
        //账号
        account:"",
        //变量用户
        variableAccount:"",
      },
      approvalAccount:{
        options:[],
        loading:false

      },
    }
  },
  created(){

  },
  methods:{
    async queryAllTaskNodes(){
      let processId = utils.getUrlParams("processId");
      let res = await getAllTaskNodes({processId: processId});
      this.allTaskNodes = res.data;
    },
    defaultForm(){
      return {
        cid:'',
        configId:"",
        useDir:"INCLUDE",
        // TRUE  FALSE  NO
        conditionRes:"",
        //START|VARIABLE|ACCOUNT
        userType:"",
        approveUser:"",

        taskNode:"",
        //账号
        account:"",
        //变量用户
        variableAccount:"",
      }
    },
    userTypeChange(ut){
      if(ut === 'START'){
        this.form.approveUser = '流程发起人';
      }else{
        this.form.approveUser = '';
      }
    },
    showDialog(row){
      this.form = this.defaultForm();
      this.approvalAccount.options = [];
      this.dialogVisible = true
      this.form.conditionRes = row.conditionRes;
      this.queryAllTaskNodes();
    },
    closeDialog(){
      this.form = {};
      this.dialogVisible = false
      this.loading = false
    },
    async queryAccounts(query){
      if (query !== '') {
        this.approvalAccount.loading = true;
        let res = await queryUserList({key:query});
        this.approvalAccount.options = res.data;
        this.approvalAccount.loading = false;
      } else {
        this.approvalAccount.options = [];
      }
    },
    submit(){
      this.form.cid = utils.getUUID();
      if(this.form.userType === 'ACCOUNT'){
        this.approvalAccount.options.forEach(item=>{
          if(item.userAccount === this.form.account){
            this.form.approveUser = JSON.stringify({username:item.username,userAccount:item.userAccount});
          }
        })
      }else if(this.form.userType === 'VARIABLE'){
        this.form.approveUser = this.form.variableAccount;
      }else if(this.form.userType === 'NODE_APPROVE'){
        this.form.approveUser = this.form.taskNode;
      }
      this.$emit('success',this.form)
      this.dialogVisible = false
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
.el-form-item{
  height: 40px;
}
</style>